import React from 'react'
import { Menu, Dropdown, Icon } from 'antd'
import { connect } from 'react-redux'
import Cookies from 'js-cookie'
import { actionCreators } from '../../store'
import { TOKEN_KEY } from '../../constants'
import './style.scss'

function Header(props) {
  const { menuCollapsed, setMenuCollapsed, setLoginStatus, loginUser } = props
  const logout = () => {
    Cookies.remove(TOKEN_KEY, { path: '' })
    setLoginStatus(false)
    window.location.reload()
  }

  const menu = (
    <Menu>
      <Menu.Item onClick={logout}>
        <span>
          退出系统
        </span>
      </Menu.Item>
    </Menu>
  )

  return (
    <div className="app-header">
      <div className="icon collapse" onClick={setMenuCollapsed}>
        {menuCollapsed ? (<Icon type="menu-unfold"/>) : (<Icon type="menu-fold"/>)}
      </div>
      <div className="account">
        {loginUser && (
          <Dropdown overlay={menu}>
            <div><span className="name">{loginUser.actual_name}</span>({loginUser.role_name}) <Icon type="down"/></div>
          </Dropdown>
        )}
      </div>
    </div>
  )
}

export default connect(state => ({
  menuCollapsed: state.getIn(['common', 'menuCollapsed']),
  loginUser: state.getIn(['common', 'loginUser'])
}), dispatch => ({
  setMenuCollapsed() {
    dispatch(actionCreators.setMenuCollapsed())
  },
  setLoginStatus(value) {
    dispatch(actionCreators.setLoginStatus(value))
  }
}))(Header)
